<template>
  <div class="manage-layoutManage">
    <div class="content">
      <div class="head">
        <span>标识:</span>
        <a-input v-model:value="searchFun.searchInfo.name" style="width: 120px; margin: 0 15px"></a-input>
        <span>名称:</span>
        <a-input v-model:value="searchFun.searchInfo.label" style="width: 120px; margin: 0 15px"></a-input>
        <a-button type="primary" @click="searchFun.searchClick">
          <search-outlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
      </div>
      <div class="middle">
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px">
          <a-button v-show="!iAmComponent" type="primary" @click="cli_add">
            <plus-outlined />
            新增
          </a-button>
          <div v-show="!iAmComponent">
            <a-button
              v-if="!layoutswitch"
              style="display: flex; align-items: center"
              @click="layoutswitch = !layoutswitch"
            >
              <svg
                t="1668060573119"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5155"
                width="15"
                height="15"
              >
                <path
                  d="M288 32v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 32v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 32v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM288 400v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 400v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 400v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM288 768v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 768v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 768v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32z"
                  p-id="5156"
                ></path>
              </svg>
              <span>表格</span>
            </a-button>
            <a-button v-else style="display: flex; align-items: center" @click="layoutswitch = !layoutswitch">
              <svg
                t="1668060920052"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5688"
                width="15"
                height="15"
              >
                <path
                  d="M380.928 67.584q26.624 0 45.568 18.944t18.944 45.568l0 256q0 26.624-18.944 45.568t-45.568 18.944l-256 0q-26.624 0-45.056-18.944t-18.432-45.568l0-256q0-26.624 18.432-45.568t45.056-18.944l256 0zM380.928 580.608q26.624 0 45.568 18.432t18.944 45.056l0 256q0 26.624-18.944 45.568t-45.568 18.944l-256 0q-26.624 0-45.056-18.944t-18.432-45.568l0-256q0-26.624 18.432-45.056t45.056-18.432l256 0zM893.952 67.584q26.624 0 45.056 18.944t18.432 45.568l0 256q0 26.624-18.432 45.568t-45.056 18.944l-256 0q-26.624 0-45.568-18.944t-18.944-45.568l0-256q0-26.624 18.944-45.568t45.568-18.944l256 0zM893.952 580.608q26.624 0 45.056 18.432t18.432 45.056l0 256q0 26.624-18.432 45.568t-45.056 18.944l-256 0q-26.624 0-45.568-18.944t-18.944-45.568l0-256q0-26.624 18.944-45.056t45.568-18.432l256 0z"
                  p-id="5689"
                ></path>
              </svg>
              <span>卡片</span>
            </a-button>
          </div>
        </div>
        <div v-show="layoutswitch" class="permission-page-table">
          <a-table
            :columns="columns"
            :data-source="portComList"
            :pagination="false"
            :loading="tableLoading"
            :scroll="{ y: tableHeight }"
          >
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'option'">
                <div style="display: flex; align-items: center">
                  <a-button type="link" @click="cli_detail(index)">详情</a-button>
                  <linkButton
                    :record-or-index="index"
                    :use-item="2"
                    @cli-edit="cli_edit"
                    @cli-delete="cli_delete"
                  ></linkButton>
                </div>
              </template>
              <template v-if="column.key === 'url'">
                <div style="width: 50px; height: 33px">
                  <img style="width: 100%; height: 100%" :src="record.url" alt="" />
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div v-show="!layoutswitch" :class="{ 'home-portletManage': 1, iAmComponent: iAmComponent }">
          <!--布局模板, 缩放 300*200-->
          <div v-for="(item, index) in portComList" :key="index" @click="iAmComponent_click(item, index)">
            <div
              :class="{ suofangblock: 1, selecte: iAmComponent && iAmComponentIdx === index }"
              @mouseenter="mouseenter"
              @mouseleave="mouseleave"
            >
              <img style="width: 100%; height: 100%" :src="item.url" alt="" />
              <div style="position: absolute; right: 10px; bottom: 10px; display: none">
                <a-button type="primary" danger @click="cli_delete(index)">删除</a-button>
                <a-button style="margin: 0 10px" @click="cli_edit(index)">编辑</a-button>
                <a-button @click="cli_detail(index)">详情</a-button>
              </div>
            </div>
            <div>
              <div>
                <span style="font-weight: bolder">{{ '名称: ' }}</span>
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </div>
    </div>
  </div>
  <com_edit
    v-if="addEditFun.renewEdit"
    :is-show-edit="addEditFun.isShowEdit"
    :add-edit-fun="addEditFun"
    :list="portComList"
    @close-edit="closeEdit"
    @create-success="createSuccess"
    @update-success="updateSuccess"
  ></com_edit>
  <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
    <span v-if="deleteFun.isDelete">
      {{ `确认删除 ${portComList[deleteFun.del_idx].label} 吗 ?` }}
    </span>
  </a-modal>
</template>

<script setup>
import { watch, ref, reactive, toRefs, nextTick, defineProps, defineEmits, onMounted } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import com_edit from './edit/edit'
import linkButton from '@/components/linkButton'

// 组件在页面设计中复用
const props = defineProps({ iAmComponent: Boolean })
const { iAmComponent } = toRefs(props)
const emit = defineEmits(['iAmComponent_click'])
const iAmComponentIdx = ref(null)
const iAmComponent_click = (item, index) => {
  iAmComponentIdx.value = index
  emit('iAmComponent_click', item)
}

const portComList = ref([])
const tableLoading = ref(false)
//==分页功能==========
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    getList()
  },
})

if (!portComList.value.length) {
  getList()
}

//==获取缩略图=======================
function getList(post = pagFun.pagInfo) {
  tableLoading.value = true
  portComList.value = []
  factory.searchLayoutList(post).then((res) => {
    tableLoading.value = false
    res.data.dataList.forEach((item, n) => {
      portComList.value.push(item)
    })
    pagFun.pagInfo.total = Number(res.data.totalCount)
  })
}

//==表格================
const columns = ref([
  {
    title: '操作',
    key: 'option',
    width: 140,
  },
  {
    title: '标识',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '名称',
    dataIndex: 'label',
    key: 'label',
  },
  {
    title: '缩略图',
    dataIndex: 'url',
    key: 'url',
    width: 100,
  },
  {
    title: '更新人',
    dataIndex: 'modifierName',
    key: 'modifierName',
  },
  {
    title: '更新时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
  },
])
const tableHeight = ref(452)
onMounted(() => {
  if (iAmComponent.value) return
  let ele = document.getElementsByClassName('manage-layoutManage')
  if (iAmComponent.value) {
    tableHeight.value = ele[0].offsetHeight - 55 - 5 - 30
  } else {
    tableHeight.value = ele[0].offsetHeight - 217
  }
})

/** 切换模式********************************************/
const layoutswitch = ref(iAmComponent.value ? false : true)

//==新增布局组件===============
const addEditFun = reactive({
  isShowEdit: false,
  currentIdx: -1,
  isNewOrEdit: 'new',
  isDetl: false,
  renewEdit: true,
})
const isShowEdit = ref(false)
const currentItem = ref({})
const isNewOrEdit = ref('')
const cli_add = () => {
  addEditFun.isNewOrEdit = 'new'
  addEditFun.currentIdx = -1
  addEditFun.isShowEdit = true
  addEditFun.isDetl = false
}
const cli_edit = (index) => {
  addEditFun.isNewOrEdit = 'edit'
  addEditFun.currentIdx = index
  addEditFun.isShowEdit = true
  addEditFun.isDetl = false
}
const cli_detail = (index) => {
  addEditFun.isNewOrEdit = 'edit'
  addEditFun.currentIdx = index
  addEditFun.isShowEdit = true
  addEditFun.isDetl = true
}
const closeEdit = () => {
  addEditFun.isShowEdit = false
  addEditFun.renewEdit = false
  nextTick(() => {
    addEditFun.renewEdit = true
  })
}
const updateSuccess = (newItem) => {
  getList()
}
const createSuccess = (newItem) => {
  getList()
}

//==删除============================
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (idx) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = idx
}
const delete_ok = () => {
  factory.deletLayoutList(portComList.value[deleteFun.del_idx].id).then((res) => {
    deleteFun.isDelete = false
    getList()
  })
}

//==鼠标移入移出============================
const mouseenter = (e) => {
  if (iAmComponent.value) {
    return
  }
  e.path[0].children[1].style.display = 'inherit'
}
const mouseleave = (e) => {
  e.path[0].children[1].style.display = 'none'
}

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { label: '', name: '' },
  openStat: false,
  searchClick: () => {
    pagFun.pagInfo.pageNo = 1
    let pagInfo = pagFun.pagInfo
    let post = { pageNo: pagInfo.pageNo, pageSize: pagInfo.pageSize, ...searchFun.searchInfo }
    getList(post)
  },
  reset: () => {
    searchFun.searchInfo = { label: '', name: '' }
  },
  open: () => {
    searchFun.openStat = !searchFun.openStat
  },
})
</script>

<style lang="less" scoped>
.home-portletManage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 57px);
  overflow: auto;
  user-select: none;

  .suofangblock {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 10px;
    overflow: hidden;
    border: 1px solid black;
  }

  .selecte {
    border: 3px solid blue;
  }
}

.iAmComponent {
  height: calc(100% - 15px);
}

.manage-layoutManage {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f5f8f9;

  .content {
    height: 100%;
    padding: 15px;
    background-color: white;

    .head {
      display: flex;
      font-size: 14px;
      line-height: 32px;
    }

    .middle {
      height: calc(100% - 88px);
      margin: 15px 0;
    }

    .foot {
      display: flex;
      justify-content: right;
    }
  }
}
</style>

<style lang="less">
.manage-layoutManage {
  .permission-page-table {
    .ant-tabs {
      padding: 0 !important;
    }

    .ant-btn-link {
      padding: 0 5px !important;
    }
  }
}
</style>
